<template>
  <div>
    <ant-card class="Card">
      <template #content>
        <div class="topTitle">今天、昨天、本月请假</div>
        <more-line :height="400" :sourceData="sourceData" />
      </template>
    </ant-card>
    <ant-card class="Card">
      <template #content>
        <div class="topTitle">请假比率</div>
        <ant-line :height="400" :sourceData="LineData" :alias="alias"/>
      </template>
    </ant-card>
  </div>
</template>
<script lang="ts">
const MoreLine = () =>
  import("../../components/Chart/Line/MoreLine.vue").then(m => m.default || m);
const AntCard = () =>
  import("../../components/Card.vue").then(m => m.default || m);
const AntLine = () =>
  import("../../components/Chart/Line/Line.vue").then(m => m.default || m);
import { Component, Vue } from "vue-property-decorator";
import { Basis } from "../../models/Chat/Pie";
import AntSingleUpload from "../../components/Ant/AntAvatar.vue";

@Component({
  name: "teacher-staffare",
  layout: "menu",
  components: {
    MoreLine,
    AntCard,
    AntLine
  }
})
export default class TeacherStaffAre extends Vue {
  multiterm: any = [];
  alias:string = "比率";
  LineData: any[] = [
    { year: "迟到比率", value: 3 },
    { year: "未打卡比率", value: 4 },
    { year: "早退比率", value: 3 },
    { year: "旷工比率", value: 5 }
  ];
  sourceData: any = [
    {
      month: "今天",
      city: "请假人数",
      temperature: 7
    },
    {
      month: "今天",
      city: "应考勤人数",
      temperature: 10
    },
    {
      month: "今天",
      city: "签到人次",
      temperature: 20
    },
    {
      month: "今天",
      city: "迟到人次",
      temperature: 21
    },
    {
      month: "今天",
      city: "未打卡人次",
      temperature: 22
    },
    {
      month: "今天",
      city: "早退人次",
      temperature: 23
    },
    {
      month: "今天",
      city: "旷工人次",
      temperature: 24
    },

    // ----
    {
      month: "昨天",
      city: "请假人数",
      temperature: 25
    },
    {
      month: "昨天",
      city: "应考勤人数",
      temperature: 26
    },
    {
      month: "昨天",
      city: "签到人次",
      temperature: 27
    },
    {
      month: "昨天",
      city: "迟到人次",
      temperature: 28
    },
    {
      month: "昨天",
      city: "未打卡人次",
      temperature: 29
    },
    {
      month: "昨天",
      city: "早退人次",
      temperature: 30
    },
    {
      month: "昨天",
      city: "旷工人次",
      temperature: 31
    },
    // ----
    {
      month: "本月",
      city: "请假人数",
      temperature: 32
    },
    {
      month: "本月",
      city: "请假天数",
      temperature: 33
    },
    {
      month: "本月",
      city: "迟到总数",
      temperature: 34
    },
    {
      month: "本月",
      city: "未打卡总数",
      temperature: 35
    },
    {
      month: "本月",
      city: "早退总数",
      temperature: 36
    },
    {
      month: "本月",
      city: "旷工总数",
      temperature: 37
    }
  ];
  created() {}
}
</script>
<style lang="less" scoped>
.Card {
  margin-bottom: 10px;
}
.topTitle {
  text-align: center;
  font-size: 30px;
  margin-bottom: 15px;
  margin-top: 15px;
}
</style>
